<template>
  <Left @toPage="toPage" class="left"/>
  <Content :page="page" class="content"/>
</template>

<script lang='ts'>
import Left from 'components/Left.vue'
import Content from 'components/Content.vue'

import {defineComponent, ref} from 'vue'

export default defineComponent({
  name: 'Main',
  components: {
    Left, Content
  },
  setup(){
    let page = ref(0)
    const toPage = (index: any) =>{
      console.log(index)
      page.value = index
    }
    return {page,toPage}
  }
})
</script>

<style lang="scss" scoped>
.left {
  float: left;
  width: 240px;
}

.content {
  float: right;
  width: calc(100vw - 260px);
  min-width: 600px;
}

.left, .content {
  height: 100%;
  min-height: 600px;
  padding: 40px 0;
  box-sizing: border-box;
}
</style>